<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>按需引入 | BIN-UI-DESIGN</title>
    <meta name="description" content="A Compontnts Lib for Vue3">
    <link rel="preload stylesheet" href="/bin-ui-design/assets/style.c1bcbbc4.css" as="style">
    
    <script type="module" src="/bin-ui-design/assets/app.e7678c4e.js"></script>
    <link rel="preload" href="/bin-ui-design/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/framework.ef1b8cce.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/theme.feefc56e.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/preset.a505c3e9.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/dayjs.min.04d70162.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/docs_import-on-demand.md.ffd56fe6.lean.js">
    <link rel="icon" href="/bin-ui-design/favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-10b21a41><!--[--><!--]--><!--[--><span tabindex="-1" data-v-adaaf041></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-adaaf041> Skip to content </a><!--]--><!----><header class="VPNav" data-v-10b21a41 data-v-53d5d812><div class="VPNavBar has-sidebar" data-v-53d5d812 data-v-9b495835><div class="container" data-v-9b495835><div class="title" data-v-9b495835><div class="VPNavBarTitle has-sidebar" data-v-9b495835 data-v-e8b3dcd3><a class="title" href="/bin-ui-design/" data-v-e8b3dcd3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/bin-ui-design/logo.svg" alt data-v-8268b5c7><!--]--><!--[-->BIN-UI-DESIGN<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-9b495835><div class="curtain" data-v-9b495835></div><div class="content-body" data-v-9b495835><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-9b495835><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9b495835 data-v-65dcea68><span id="main-nav-aria-label" class="visually-hidden" data-v-65dcea68>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/bin-ui-design/docs/introduction.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bin-ui-design/components/button.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>组件</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-65dcea68 data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8d848982><span class="text" data-v-8d848982><!----><span data-v-8d848982>生态系统</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8d848982><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><div class="items" data-v-a89d4855><!--[--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->资源<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-admin-pro/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-admin-pro<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav-schema/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav-schema<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v3<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-editor-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-editor-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v2<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ace-editor/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ace-editor<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-tree-org/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-tree-org<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->动画库<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-animation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-keyframe-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-keyframe-animation<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9b495835 data-v-6e555ce1><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-6e555ce1 data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9b495835 data-v-e0d4c2fb data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9b495835 data-v-3ec7766a data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8d848982><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8d848982><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><!----><!--[--><!--[--><!----><div class="group" data-v-3ec7766a><div class="item appearance" data-v-3ec7766a><p class="label" data-v-3ec7766a>Appearance</p><div class="appearance-action" data-v-3ec7766a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-3ec7766a data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-3ec7766a><div class="item social-links" data-v-3ec7766a><div class="VPSocialLinks social-links-list" data-v-3ec7766a data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9b495835 data-v-0a67234a><span class="container" data-v-0a67234a><span class="top" data-v-0a67234a></span><span class="middle" data-v-0a67234a></span><span class="bottom" data-v-0a67234a></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-10b21a41 data-v-eddb4634><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-eddb4634><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-eddb4634><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-eddb4634>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-eddb4634 data-v-b2855fa6><button data-v-b2855fa6>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-10b21a41 data-v-2abe540d><div class="curtain" data-v-2abe540d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2abe540d><span class="visually-hidden" id="sidebar-aria-label" data-v-2abe540d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>开始</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/introduction.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/changelog.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>变更日志</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0 has-active" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>快速上手</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/installation.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>安装</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/usage-sfc.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>在 SFC 中使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/import-on-demand.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>按需引入</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>指南</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/jsx.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>JSX & TSX</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/color-design.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>色彩设计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/custom-theme.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>调整主题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-css.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>通用样式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-api.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>帮助函数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-directive.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>组件指令</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/docs/common-transition.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9>内置动画</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-10b21a41 data-v-4d31e3f3><div class="VPDoc has-sidebar has-aside" data-v-4d31e3f3 data-v-9f9999b2><!--[--><!--]--><div class="container" data-v-9f9999b2><div class="aside" data-v-9f9999b2><div class="aside-curtain" data-v-9f9999b2></div><div class="aside-container" data-v-9f9999b2><div class="aside-content" data-v-9f9999b2><div class="VPDocAside" data-v-9f9999b2 data-v-1658cfd8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-1658cfd8 data-v-667990eb><div class="content" data-v-667990eb><div class="outline-marker" data-v-667990eb></div><div class="outline-title" data-v-667990eb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-667990eb><span class="visually-hidden" id="doc-outline-aria-label" data-v-667990eb> Table of Contents for current page </span><ul class="root" data-v-667990eb data-v-d7e7591d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-1658cfd8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9f9999b2><div class="content-container" data-v-9f9999b2><!--[--><!--]--><!----><main class="main" data-v-9f9999b2><div style="position:relative;" class="vp-doc _bin-ui-design_docs_import-on-demand" data-v-9f9999b2><div><!----><h1 id="按需引入-tree-shaking" tabindex="-1">按需引入（Tree Shaking） <a class="header-anchor" href="#按需引入-tree-shaking" aria-label="Permalink to &quot;按需引入（Tree Shaking）&quot;">​</a></h1><p>Bin UI Design 支持 tree shaking，组件、语言、主题均可 tree-shaking。</p><p>了解更多关于主题设定的信息，参见 <a href="/bin-ui-design/docs/custom-theme.html">调整主题</a>。</p><h2 id="手动引入" tabindex="-1">手动引入 <a class="header-anchor" href="#手动引入" aria-label="Permalink to &quot;手动引入&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#6E6A86;">&lt;</span><span style="color:#9CCFD8;">script</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">setup</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">lang</span><span style="color:#908CAA;">=</span><span style="color:#F6C177;">&quot;ts&quot;</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#908CAA;">{</span><span style="color:#3E8FB0;"> </span><span style="color:#E0DEF4;font-style:italic;">BButton</span><span style="color:#3E8FB0;"> </span><span style="color:#908CAA;">}</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;bin-ui-design&#39;</span></span>
<span class="line"><span style="color:#6E6A86;">&lt;/</span><span style="color:#9CCFD8;">script</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6E6A86;">&lt;</span><span style="color:#9CCFD8;">template</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#6E6A86;">&lt;</span><span style="color:#9CCFD8;">div</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">class</span><span style="color:#908CAA;">=</span><span style="color:#F6C177;">&quot;card&quot;</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#6E6A86;">&lt;</span><span style="color:#9CCFD8;">b-button</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">type</span><span style="color:#908CAA;">=</span><span style="color:#F6C177;">&quot;primary&quot;</span><span style="color:#6E6A86;">&gt;</span><span style="color:#E0DEF4;">Primary Button</span><span style="color:#6E6A86;">&lt;/</span><span style="color:#9CCFD8;">b-button</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#6E6A86;">&lt;</span><span style="color:#EB6F92;">BButton</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">type</span><span style="color:#908CAA;">=</span><span style="color:#F6C177;">&quot;primary&quot;</span><span style="color:#6E6A86;">&gt;</span><span style="color:#E0DEF4;">Primary Button</span><span style="color:#6E6A86;">&lt;/</span><span style="color:#EB6F92;">BButton</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#6E6A86;">&lt;/</span><span style="color:#9CCFD8;">div</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#6E6A86;">&lt;/</span><span style="color:#9CCFD8;">template</span><span style="color:#6E6A86;">&gt;</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#002339;">&lt;</span><span style="color:#0444AC;">script</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">setup</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">lang</span><span style="color:#002339;">=</span><span style="color:#A44185;">&quot;ts&quot;</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> { </span><span style="color:#2F86D2;">BButton</span><span style="color:#002339;"> } </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;bin-ui-design&#39;</span></span>
<span class="line"><span style="color:#002339;">&lt;/</span><span style="color:#0444AC;">script</span><span style="color:#002339;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#002339;">&lt;</span><span style="color:#0444AC;">template</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">  &lt;</span><span style="color:#0444AC;">div</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">class</span><span style="color:#002339;">=</span><span style="color:#A44185;">&quot;card&quot;</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">    &lt;</span><span style="color:#0444AC;">b-button</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">type</span><span style="color:#002339;">=</span><span style="color:#A44185;">&quot;primary&quot;</span><span style="color:#002339;">&gt;Primary Button&lt;/</span><span style="color:#0444AC;">b-button</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">    &lt;</span><span style="color:#207BB8;font-style:italic;font-weight:bold;text-decoration:underline;">BButton</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">type</span><span style="color:#002339;">=</span><span style="color:#A44185;">&quot;primary&quot;</span><span style="color:#002339;">&gt;Primary Button&lt;/</span><span style="color:#207BB8;font-style:italic;font-weight:bold;text-decoration:underline;">BButton</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">  &lt;/</span><span style="color:#0444AC;">div</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">&lt;/</span><span style="color:#0444AC;">template</span><span style="color:#002339;">&gt;</span></span></code></pre></div><h2 id="自动引入" tabindex="-1">自动引入 <a class="header-anchor" href="#自动引入" aria-label="Permalink to &quot;自动引入&quot;">​</a></h2><p>可以借助插件 <code>unplugin-vue-components</code> 来自动的进行组件的引入。</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> vite.config.ts</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#908CAA;">{</span><span style="color:#3E8FB0;"> </span><span style="color:#E0DEF4;font-style:italic;">defineConfig</span><span style="color:#3E8FB0;"> </span><span style="color:#908CAA;">}</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;vite&#39;</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#E0DEF4;font-style:italic;">vue</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;@vitejs/plugin-vue&#39;</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#E0DEF4;font-style:italic;">vueJsx</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;@vitejs/plugin-vue-jsx&#39;</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#E0DEF4;font-style:italic;">Components</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;unplugin-vue-components/vite&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">export default </span><span style="color:#EA9A97;">defineConfig</span><span style="color:#E0DEF4;">(</span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#3E8FB0;">  plugins</span><span style="color:#908CAA;">:</span><span style="color:#3E8FB0;"> </span><span style="color:#E0DEF4;">[</span></span>
<span class="line"><span style="color:#3E8FB0;">    </span><span style="color:#EA9A97;">vue</span><span style="color:#E0DEF4;">()</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#3E8FB0;">    </span><span style="color:#EA9A97;">vueJsx</span><span style="color:#E0DEF4;">()</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#3E8FB0;">    </span><span style="color:#EA9A97;">Components</span><span style="color:#E0DEF4;">(</span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#3E8FB0;">      resolvers</span><span style="color:#908CAA;">:</span><span style="color:#3E8FB0;"> </span><span style="color:#E0DEF4;">[</span></span>
<span class="line"><span style="color:#908CAA;">        </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 自动引入组件</span></span>
<span class="line"><span style="color:#3E8FB0;">        </span><span style="color:#C4A7E7;font-style:italic;">componentName</span><span style="color:#3E8FB0;"> =&gt; </span><span style="color:#E0DEF4;">(</span><span style="color:#908CAA;">{</span><span style="color:#3E8FB0;"> name</span><span style="color:#908CAA;">:</span><span style="color:#3E8FB0;"> </span><span style="color:#E0DEF4;font-style:italic;">componentName</span><span style="color:#908CAA;">,</span><span style="color:#3E8FB0;"> from</span><span style="color:#908CAA;">:</span><span style="color:#3E8FB0;"> </span><span style="color:#F6C177;">&#39;bin-ui-design&#39;</span><span style="color:#3E8FB0;"> </span><span style="color:#908CAA;">}</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#3E8FB0;">      </span><span style="color:#E0DEF4;">]</span></span>
<span class="line"><span style="color:#3E8FB0;">    </span><span style="color:#908CAA;">}</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#3E8FB0;">  </span><span style="color:#E0DEF4;">]</span></span>
<span class="line"><span style="color:#908CAA;">}</span><span style="color:#E0DEF4;">)</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">// vite.config.ts</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> { </span><span style="color:#2F86D2;">defineConfig</span><span style="color:#002339;"> } </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;vite&#39;</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">vue</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;@vitejs/plugin-vue&#39;</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">vueJsx</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;@vitejs/plugin-vue-jsx&#39;</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">Components</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;unplugin-vue-components/vite&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7B30D0;">export</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">default</span><span style="color:#002339;"> </span><span style="color:#7EB233;">defineConfig</span><span style="color:#002339;">({</span></span>
<span class="line"><span style="color:#002339;">  plugins: [</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#7EB233;">vue</span><span style="color:#002339;">(),</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#7EB233;">vueJsx</span><span style="color:#002339;">(),</span></span>
<span class="line"><span style="color:#002339;">    </span><span style="color:#7EB233;">Components</span><span style="color:#002339;">({</span></span>
<span class="line"><span style="color:#002339;">      resolvers: [</span></span>
<span class="line"><span style="color:#002339;">        </span><span style="color:#357B42;font-style:italic;">// 自动引入组件</span></span>
<span class="line"><span style="color:#002339;">        </span><span style="color:#B1108E;">componentName</span><span style="color:#002339;"> </span><span style="color:#0991B6;">=&gt;</span><span style="color:#002339;"> ({ name: </span><span style="color:#2F86D2;">componentName</span><span style="color:#002339;">, from: </span><span style="color:#A44185;">&#39;bin-ui-design&#39;</span><span style="color:#002339;"> })</span></span>
<span class="line"><span style="color:#002339;">      ]</span></span>
<span class="line"><span style="color:#002339;">    })</span></span>
<span class="line"><span style="color:#002339;">  ]</span></span>
<span class="line"><span style="color:#002339;">})</span></span></code></pre></div><h2 id="按需全局安装组件-手动" tabindex="-1">按需全局安装组件（手动） <a class="header-anchor" href="#按需全局安装组件-手动" aria-label="Permalink to &quot;按需全局安装组件（手动）&quot;">​</a></h2><p>组件库暴露了全部组件，指令，公共函数等。可以在配合自动引入，将公共的指令和帮助函数引入。便于管理</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> main.ts</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#908CAA;">{</span><span style="color:#3E8FB0;"> </span><span style="color:#E0DEF4;font-style:italic;">createApp</span><span style="color:#3E8FB0;"> </span><span style="color:#908CAA;">}</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#3E8FB0;">import </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> create UI 全局组件和指令安装器</span></span>
<span class="line"><span style="color:#3E8FB0;">  </span><span style="color:#E0DEF4;font-style:italic;">create</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 部分指令</span></span>
<span class="line"><span style="color:#3E8FB0;">  </span><span style="color:#E0DEF4;font-style:italic;">ClickOutside</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 组件</span></span>
<span class="line"><span style="color:#3E8FB0;">  </span><span style="color:#E0DEF4;font-style:italic;">BButton</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#908CAA;">  </span><span style="color:#908CAA;font-style:italic;">//</span><span style="color:#6E6A86;font-style:italic;"> 工具包</span></span>
<span class="line"><span style="color:#3E8FB0;">  </span><span style="color:#E0DEF4;font-style:italic;">Utils</span></span>
<span class="line"><span style="color:#908CAA;">}</span><span style="color:#3E8FB0;"> from </span><span style="color:#F6C177;">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">UI</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">create</span><span style="color:#E0DEF4;">(</span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">  components</span><span style="color:#908CAA;">:</span><span style="color:#E0DEF4;"> [</span><span style="color:#E0DEF4;font-style:italic;">BButton</span><span style="color:#E0DEF4;">]</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">  directives</span><span style="color:#908CAA;">:</span><span style="color:#E0DEF4;"> [</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#908CAA;">{</span></span>
<span class="line"><span style="color:#E0DEF4;">      name</span><span style="color:#908CAA;">:</span><span style="color:#E0DEF4;"> </span><span style="color:#F6C177;">&#39;ClickOutside&#39;</span><span style="color:#908CAA;">,</span></span>
<span class="line"><span style="color:#E0DEF4;">      directive</span><span style="color:#908CAA;">:</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">ClickOutside</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#908CAA;">}</span></span>
<span class="line"><span style="color:#E0DEF4;">  ]</span></span>
<span class="line"><span style="color:#908CAA;">}</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#3E8FB0;">const</span><span style="color:#E0DEF4;"> </span><span style="color:#E0DEF4;font-style:italic;">app</span><span style="color:#E0DEF4;"> </span><span style="color:#3E8FB0;">=</span><span style="color:#E0DEF4;"> </span><span style="color:#EA9A97;">createApp</span><span style="color:#E0DEF4;">()</span></span>
<span class="line"><span style="color:#E0DEF4;font-style:italic;">app</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">use</span><span style="color:#E0DEF4;">(</span><span style="color:#E0DEF4;font-style:italic;">UI</span><span style="color:#E0DEF4;">)</span></span>
<span class="line"><span style="color:#E0DEF4;font-style:italic;">app</span><span style="color:#3E8FB0;">.</span><span style="color:#EA9A97;">mount</span><span style="color:#E0DEF4;">(</span><span style="color:#F6C177;">&#39;#app&#39;</span><span style="color:#E0DEF4;">)</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#357B42;font-style:italic;">// main.ts</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> { </span><span style="color:#2F86D2;">createApp</span><span style="color:#002339;"> } </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;vue&#39;</span></span>
<span class="line"><span style="color:#7B30D0;">import</span><span style="color:#002339;"> {</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// create UI 全局组件和指令安装器</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">create</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// 部分指令</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">ClickOutside</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// 组件</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">BButton</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#357B42;font-style:italic;">// 工具包</span></span>
<span class="line"><span style="color:#002339;">  </span><span style="color:#2F86D2;">Utils</span></span>
<span class="line"><span style="color:#002339;">} </span><span style="color:#7B30D0;">from</span><span style="color:#002339;"> </span><span style="color:#A44185;">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">UI</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">create</span><span style="color:#002339;">({</span></span>
<span class="line"><span style="color:#002339;">  components: [</span><span style="color:#2F86D2;">BButton</span><span style="color:#002339;">],</span></span>
<span class="line"><span style="color:#002339;">  directives: [</span></span>
<span class="line"><span style="color:#002339;">    {</span></span>
<span class="line"><span style="color:#002339;">      name: </span><span style="color:#A44185;">&#39;ClickOutside&#39;</span><span style="color:#002339;">,</span></span>
<span class="line"><span style="color:#002339;">      directive: </span><span style="color:#2F86D2;">ClickOutside</span></span>
<span class="line"><span style="color:#002339;">    }</span></span>
<span class="line"><span style="color:#002339;">  ]</span></span>
<span class="line"><span style="color:#002339;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#0991B6;">const</span><span style="color:#002339;"> </span><span style="color:#2F86D2;">app</span><span style="color:#002339;"> </span><span style="color:#7B30D0;">=</span><span style="color:#002339;"> </span><span style="color:#7EB233;">createApp</span><span style="color:#002339;">()</span></span>
<span class="line"><span style="color:#2F86D2;">app</span><span style="color:#002339;">.</span><span style="color:#7EB233;">use</span><span style="color:#002339;">(</span><span style="color:#2F86D2;">UI</span><span style="color:#002339;">)</span></span>
<span class="line"><span style="color:#2F86D2;">app</span><span style="color:#002339;">.</span><span style="color:#7EB233;">mount</span><span style="color:#002339;">(</span><span style="color:#A44185;">&#39;#app&#39;</span><span style="color:#002339;">)</span></span></code></pre></div><p>这时候你就可以愉快的进行组件使用啦。</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki rose-pine-moon vp-code-dark"><code><span class="line"><span style="color:#6E6A86;">&lt;</span><span style="color:#9CCFD8;">template</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#6E6A86;">&lt;</span><span style="color:#9CCFD8;">div</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">class</span><span style="color:#908CAA;">=</span><span style="color:#F6C177;">&quot;card&quot;</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#6E6A86;">&lt;</span><span style="color:#9CCFD8;">b-button</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">type</span><span style="color:#908CAA;">=</span><span style="color:#F6C177;">&quot;primary&quot;</span><span style="color:#6E6A86;">&gt;</span><span style="color:#E0DEF4;">Primary Button</span><span style="color:#6E6A86;">&lt;/</span><span style="color:#9CCFD8;">b-button</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">    </span><span style="color:#6E6A86;">&lt;</span><span style="color:#EB6F92;">BButton</span><span style="color:#E0DEF4;"> </span><span style="color:#C4A7E7;font-style:italic;">type</span><span style="color:#908CAA;">=</span><span style="color:#F6C177;">&quot;primary&quot;</span><span style="color:#6E6A86;">&gt;</span><span style="color:#E0DEF4;">Primary Button</span><span style="color:#6E6A86;">&lt;/</span><span style="color:#EB6F92;">BButton</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#E0DEF4;">  </span><span style="color:#6E6A86;">&lt;/</span><span style="color:#9CCFD8;">div</span><span style="color:#6E6A86;">&gt;</span></span>
<span class="line"><span style="color:#6E6A86;">&lt;/</span><span style="color:#9CCFD8;">template</span><span style="color:#6E6A86;">&gt;</span></span></code></pre><pre class="shiki slack-ochin vp-code-light"><code><span class="line"><span style="color:#002339;">&lt;</span><span style="color:#0444AC;">template</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">  &lt;</span><span style="color:#0444AC;">div</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">class</span><span style="color:#002339;">=</span><span style="color:#A44185;">&quot;card&quot;</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">    &lt;</span><span style="color:#0444AC;">b-button</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">type</span><span style="color:#002339;">=</span><span style="color:#A44185;">&quot;primary&quot;</span><span style="color:#002339;">&gt;Primary Button&lt;/</span><span style="color:#0444AC;">b-button</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">    &lt;</span><span style="color:#207BB8;font-style:italic;font-weight:bold;text-decoration:underline;">BButton</span><span style="color:#002339;"> </span><span style="color:#DF8618;font-style:italic;">type</span><span style="color:#002339;">=</span><span style="color:#A44185;">&quot;primary&quot;</span><span style="color:#002339;">&gt;Primary Button&lt;/</span><span style="color:#207BB8;font-style:italic;font-weight:bold;text-decoration:underline;">BButton</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">  &lt;/</span><span style="color:#0444AC;">div</span><span style="color:#002339;">&gt;</span></span>
<span class="line"><span style="color:#002339;">&lt;/</span><span style="color:#0444AC;">template</span><span style="color:#002339;">&gt;</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-9f9999b2 data-v-61fb544c><!--[--><!--]--><!----><nav class="prev-next" data-v-61fb544c><div class="pager" data-v-61fb544c><a class="pager-link prev" href="/bin-ui-design/docs/usage-sfc.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Previous page</span><span class="title" data-v-61fb544c>在 SFC 中使用</span></a></div><div class="pager" data-v-61fb544c><a class="pager-link next" href="/bin-ui-design/docs/jsx.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Next page</span><span class="title" data-v-61fb544c>JSX & TSX</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-10b21a41 data-v-1c165e87><div class="container" data-v-1c165e87><!----><p class="copyright" data-v-1c165e87>MIT Licensed | Copyright © 2023-present bin-ui-design</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_calendar.md\":\"ed1fb758\",\"components_affix.md\":\"c7b107b7\",\"components_back-top.md\":\"a90798a3\",\"components_breadcrumb.md\":\"e45c7120\",\"components_badge.md\":\"a83e273c\",\"components_alert.md\":\"fce5ac8e\",\"components_contextmenu.md\":\"3a8ef142\",\"components_circle.md\":\"7c03ee32\",\"components_config-provider.md\":\"bbf6fd0c\",\"components_checkbox.md\":\"2cb0b537\",\"components_carousel.md\":\"501e54e7\",\"components_empty.md\":\"0f6ba589\",\"components_layout.md\":\"e372cf7d\",\"components_count-to.md\":\"4af99aa6\",\"components_loading-bar.md\":\"dac78d00\",\"components_desc.md\":\"e468461f\",\"components_scrollbar.md\":\"291e9d8e\",\"components_anchor.md\":\"9b9a5663\",\"components_card.md\":\"8f27d101\",\"components_divider.md\":\"b50c7752\",\"docs_changelog.md\":\"deb42a54\",\"components_color-picker.md\":\"67dfd5c6\",\"components_notice.md\":\"a4721004\",\"docs_introduction.md\":\"e33e2b29\",\"index.md\":\"554113db\",\"components_button.md\":\"c7f6d651\",\"components_page.md\":\"8728f48d\",\"components_split.md\":\"383fbbe8\",\"docs_jsx.md\":\"58e48e69\",\"components_collapse.md\":\"39f1c339\",\"components_input-number.md\":\"b95178ec\",\"docs_common-directive.md\":\"79801c01\",\"docs_color-design.md\":\"1674c3b9\",\"components_trend.md\":\"2b24adde\",\"components_message-box.md\":\"5ea759a2\",\"components_dropdown.md\":\"13a35e2a\",\"components_upload.md\":\"5e2cedc1\",\"components_rate.md\":\"35271357\",\"docs_import-on-demand.md\":\"ffd56fe6\",\"components_radio.md\":\"5fd31931\",\"components_switch.md\":\"473de9e1\",\"docs_usage-sfc.md\":\"4b699947\",\"docs_common-transition.md\":\"3e08447c\",\"docs_installation.md\":\"f27febf3\",\"components_image.md\":\"30431bac\",\"docs_custom-theme.md\":\"f26d8f9a\",\"components_popper.md\":\"5c9082ec\",\"components_message.md\":\"d61ecb84\",\"components_steps.md\":\"de125854\",\"components_space.md\":\"20f9ed13\",\"components_input.md\":\"37684c1c\",\"components_tag.md\":\"17b4b0b1\",\"components_loading.md\":\"822d7cf0\",\"components_time-picker.md\":\"ca9c42c9\",\"components_slider.md\":\"fa819be3\",\"components_menu.md\":\"7998f13c\",\"components_skeleton.md\":\"54c428ce\",\"components_select.md\":\"d96ed960\",\"components_drawer.md\":\"7520003f\",\"components_popover.md\":\"7a2b8b43\",\"components_timeline.md\":\"e9bdf997\",\"docs_common-css.md\":\"2b6e0566\",\"components_progress.md\":\"4a41caad\",\"components_icon.md\":\"e611d267\",\"docs_common-api.md\":\"34166aab\",\"components_cascader.md\":\"9ad54021\",\"components_tooltip.md\":\"18368c1a\",\"components_grid.md\":\"d5620c5c\",\"components_tabs.md\":\"67864029\",\"components_modal.md\":\"0d1f6c25\",\"components_date-picker.md\":\"e2b2057a\",\"components_form.md\":\"5d25e7cb\",\"components_table.md\":\"6af60abd\",\"components_tree.md\":\"d80b44bd\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"BIN-UI-DESIGN\",\"description\":\"A Compontnts Lib for Vue3\",\"base\":\"/bin-ui-design/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"siteTitle\":\"BIN-UI-DESIGN\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/docs/introduction\",\"activeMatch\":\"/docs/\"},{\"text\":\"组件\",\"link\":\"/components/button\",\"activeMatch\":\"/components/\"},{\"text\":\"生态系统\",\"items\":[{\"text\":\"资源\",\"link\":\"\"},{\"text\":\"bin-admin-pro\",\"link\":\"https://wangbin3162.github.io/bin-admin-pro/\",\"target\":\"_blank\"},{\"text\":\"bin-datav\",\"link\":\"https://wangbin3162.github.io/bin-datav\",\"target\":\"_blank\"},{\"text\":\"bin-datav-schema\",\"link\":\"https://wangbin3162.github.io/bin-datav-schema/\",\"target\":\"_blank\"},{\"text\":\"官方库v3\",\"link\":\"\"},{\"text\":\"bin-ui-next\",\"link\":\"https://wangbin3162.github.io/bin-ui-next/\",\"target\":\"_blank\"},{\"text\":\"bin-editor-next\",\"link\":\"https://wangbin3162.github.io/bin-editor-next/\",\"target\":\"_blank\"},{\"text\":\"bin-charts-next\",\"link\":\"https://wangbin3162.github.io/bin-charts-next/\",\"target\":\"_blank\"},{\"text\":\"官方库v2\",\"link\":\"\"},{\"text\":\"bin-ui\",\"link\":\"https://wangbin3162.github.io/bin-ui/\",\"target\":\"_blank\"},{\"text\":\"bin-ace-editor\",\"link\":\"https://wangbin3162.github.io/bin-ace-editor/\",\"target\":\"_blank\"},{\"text\":\"bin-charts\",\"link\":\"https://wangbin3162.github.io/bin-charts/\",\"target\":\"_blank\"},{\"text\":\"bin-tree-org\",\"link\":\"https://wangbin3162.github.io/bin-tree-org/\",\"target\":\"_blank\"},{\"text\":\"动画库\",\"link\":\"\"},{\"text\":\"bin-animation\",\"link\":\"https://wangbin3162.github.io/bin-animation/\",\"target\":\"_blank\"},{\"text\":\"bin-keyframe-animation\",\"link\":\"https://wangbin3162.github.io/bin-keyframe-animation/\",\"target\":\"_blank\"}]}],\"sidebar\":{\"/docs/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/docs/introduction\"},{\"text\":\"变更日志\",\"link\":\"/docs/changelog\"}]},{\"text\":\"快速上手\",\"items\":[{\"text\":\"安装\",\"link\":\"/docs/installation\"},{\"text\":\"在 SFC 中使用\",\"link\":\"/docs/usage-sfc\"},{\"text\":\"按需引入\",\"link\":\"/docs/import-on-demand\"}]},{\"text\":\"指南\",\"items\":[{\"text\":\"JSX & TSX\",\"link\":\"/docs/jsx\"},{\"text\":\"色彩设计\",\"link\":\"/docs/color-design\"},{\"text\":\"调整主题\",\"link\":\"/docs/custom-theme\"},{\"text\":\"通用样式\",\"link\":\"/docs/common-css\"},{\"text\":\"帮助函数\",\"link\":\"/docs/common-api\"},{\"text\":\"组件指令\",\"link\":\"/docs/common-directive\"},{\"text\":\"内置动画\",\"link\":\"/docs/common-transition\"}]}],\"/components/\":[{\"text\":\"通用组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-fire\\\"></i>图标<span>Icon</span>\",\"link\":\"/components/icon\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-Youtube\\\"></i>按钮<span>Button</span>\",\"link\":\"/components/button\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-creditcard\\\"></i>卡片<span>Card</span>\",\"link\":\"/components/card\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-interation\\\"></i>折叠面板<span>Collapse</span>\",\"link\":\"/components/collapse\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-line\\\"></i>分割线<span>Divider</span>\",\"link\":\"/components/divider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-down\\\"></i>下拉菜单<span>Dropdown</span>\",\"link\":\"/components/dropdown\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-tags\\\"></i>标签<span>Tag</span>\",\"link\":\"/components/tag\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-image\\\"></i>图片<span>Image</span>\",\"link\":\"/components/image\"}]},{\"text\":\"布局组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-layout\\\"></i>布局组件<span>Layout</span>\",\"link\":\"/components/layout\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore\\\"></i>栅格<span>Grid</span>\",\"link\":\"/components/grid\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-swap\\\"></i>间距<span>Space</span>\",\"link\":\"/components/space\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-block\\\"></i>分割面板<span>Split</span>\",\"link\":\"/components/split\"}]},{\"text\":\"数据录入组件 (14)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-edit-square\\\"></i>输入框<span>Input</span>\",\"link\":\"/components/input\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-shake\\\"></i>数字输入<span>InputNumber</span>\",\"link\":\"/components/input-number\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-plus-circle\\\"></i>单选框<span>Radio</span>\",\"link\":\"/components/radio\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-check-square\\\"></i>多选框<span>Checkbox</span>\",\"link\":\"/components/checkbox\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>开关<span>Switch</span>\",\"link\":\"/components/switch\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>选择器<span>Select</span>\",\"link\":\"/components/select\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-left\\\"></i>级联选择<span>Cascader</span>\",\"link\":\"/components/cascader\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar\\\"></i>日期选择器<span>DatePicker</span>\",\"link\":\"/components/date-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-time-circle\\\"></i>时间选择器<span>TimePicker</span>\",\"link\":\"/components/time-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-bg-colors\\\"></i>颜色选择器<span>ColorPicker</span>\",\"link\":\"/components/color-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-star\\\"></i>评分<span>Rate</span>\",\"link\":\"/components/rate\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>滑块<span>Slider</span>\",\"link\":\"/components/slider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-cloud-upload\\\"></i>上传<span>Upload</span>\",\"link\":\"/components/upload\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-reconciliation\\\"></i>表单<span>Form</span>\",\"link\":\"/components/form\"}]},{\"text\":\"数据展示组件 (9)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-branches\\\"></i>树结构<span>Tree</span>\",\"link\":\"/components/tree\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-table\\\"></i>表格<span>Table</span>\",\"link\":\"/components/table\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-read\\\"></i>分页<span>Page</span>\",\"link\":\"/components/page\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>描述<span>Desc</span>\",\"link\":\"/components/desc\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowdown\\\"></i>时间线<span>Timeline</span>\",\"link\":\"/components/timeline\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar-fill\\\"></i>日历<span>Calendar</span>\",\"link\":\"/components/calendar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore-fill\\\"></i>轮播<span>Carousel</span>\",\"link\":\"/components/carousel\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-orderedlist\\\"></i>数字动画<span>CountTo</span>\",\"link\":\"/components/count-to\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-up\\\"></i>趋势标记<span>Trend</span>\",\"link\":\"/components/trend\"}]},{\"text\":\"导航组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-pushpin\\\"></i>图钉<span>Affix</span>\",\"link\":\"/components/affix\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-attachment\\\"></i>锚点<span>Anchor</span>\",\"link\":\"/components/anchor\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-up\\\"></i>返回顶部<span>BackTop</span>\",\"link\":\"/components/back-top\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-right\\\"></i>面包屑<span>Breadcrumb</span>\",\"link\":\"/components/breadcrumb\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>加载条<span>Loading Bar</span>\",\"link\":\"/components/loading-bar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>菜单<span>Menu</span>\",\"link\":\"/components/menu\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-project\\\"></i>标签页<span>Tabs</span>\",\"link\":\"/components/tabs\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowright\\\"></i>步骤<span>Steps</span>\",\"link\":\"/components/steps\"}]},{\"text\":\"反馈组件 (13)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-error-fill\\\"></i>警告信息<span>Alert</span>\",\"link\":\"/components/alert\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>标记<span>Badge</span>\",\"link\":\"/components/badge\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-idcard\\\"></i>模态框<span>Modal</span>\",\"link\":\"/components/modal\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-message\\\"></i>消息提示<span>Message</span>\",\"link\":\"/components/message\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-mail\\\"></i>弹框提示<span>MessageBox</span>\",\"link\":\"/components/message-box\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-notification\\\"></i>通知<span>Notice</span>\",\"link\":\"/components/notice\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-info-circle\\\"></i>弹出提示<span>Tooltip</span>\",\"link\":\"/components/tooltip\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-question-circle\\\"></i>弹出信息<span>Popover</span>\",\"link\":\"/components/popover\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>抽屉<span>Drawer</span>\",\"link\":\"/components/drawer\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-sever-fill\\\"></i>骨架屏<span>Skeleton</span>\",\"link\":\"/components/skeleton\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-loading\\\"></i>加载<span>Loading</span>\",\"link\":\"/components/loading\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-hourglass\\\"></i>进度条<span>Progress</span>\",\"link\":\"/components/progress\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-redo\\\"></i>进度环<span>Circle</span>\",\"link\":\"/components/circle\"}]},{\"text\":\"内置组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>空状态<span>Empty</span>\",\"link\":\"/components/empty\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-container\\\"></i>滚动组件<span>Scrollbar</span>\",\"link\":\"/components/scrollbar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-center\\\"></i>弹层<span>Popper</span>\",\"link\":\"/components/popper\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>右键菜单<span>Contextmenu</span>\",\"link\":\"/components/contextmenu\"}]},{\"text\":\"配置组件 (1)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-setting\\\"></i>全局配置<span>ConfigProvider</span>\",\"link\":\"/components/config-provider\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wangbin3162/bin-ui-design\"}],\"footer\":{\"copyright\":\"MIT Licensed | Copyright © 2023-present bin-ui-design\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>